<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="title" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">有效时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="startDate" id="startDate" autocomplete="off" />
                    </div>
                    <div class="layui-form-mid">至</div>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="startDate" id="endDate" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="noticeTable" lay-filter="noticeTable"></table>
    </div>
</div>
<script id="tool" type="text/html">
    {{# if(d.status != 1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    {{# } }}
    {{# if(d.status == 1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs layui-btn-disabled">编辑</a>
    {{# } }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="more">
        更多
        <i class="layui-icon layui-icon-down"></i>
    </a>
</script>
<script id="tableBar" type="text/html">
    <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>
</script>
<script id="swichSex" type="text/html">
    <input type="checkbox" name="sex" value="{{d.sex}}"
           lay-skin="switch" lay-text="男|女" lay-filter="checkSex" {{d.sex==1?"checked":""}} />
</script>
<script>
    var minDate;
    layui.use(['table','form','laydate','layer','dropdown'],function(){
        var table = layui.table,form = layui.form,layer = layui.layer,
            laydate = layui.laydate,dropdown = layui.dropdown;

        laydate.render({
            elem: '#startDate'

        })
        laydate.render({
            elem: '#endDate'
        })

        //加载表格
        table.render({
            elem:'#noticeTable',
            height:'full-160',
            page: {
                theme:'#1e9fff'
            },
            toolbar:'#tableBar',
            url:'/system/nc/find',
            cols:[
                [
                {type:'numbers',fixed:'left'},
                {type:'checkbox',fixed:'left'},
                {field:'title',title:'标题',width:180},
                {field:'content',title:'公告内容'},
                {field:'status',title:'状态',width:80,
                    templet:function (obj) {
                        var status = obj.status;
                        var str = "";
                        if(status == 0){
                            str = "<span style='color: #008000'>草稿</span>"
                        }else if(status == 1){
                            str = "<span style='color: #00f'>已发布</span>"
                        }else if(status == 3){
                            str = "<span style='color: #000'>撤回</span>"
                        }else{
                            str = "<span style='color: #f00'>过期</span>"
                        }
                        return str;
                    }
                },
                {field:'acceptRole',title:'接收门户',width:200
                    /* ,templet: function (d){
                         return getRoleNames(d.acceptRoles);
                     }*/
                },
                {field:'createTime',title:'创建时间',width:150},
                {field:'createUser',title:'创建者',width:100},
                {field:'issueTime',title:'发布时间',width:150},
                {field:'issueUser',title:'发布者',width:100},
                {field:'validDate',title:'截止时间',width:150},
                {fixed:'right',title:'操作',width:150,align:'center',toolbar:'#tool'},
            ]
            ]
        })

        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;
        })

        var active = {
            dialog:function (title,id) {
                id = '?id='+(id!=""?id:0);
                var b = false;
                top.layer.open({
                    type:2,
                    title:title,
                    content:'/page/system/noticeAdd',
                    area:['800px','850px'],
                    btn:['保存且发布','保存为草稿','取消关闭'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    btn2:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnContribution();
                        return false;//阻止关闭
                    },
                    btn3:function(i,o){
                        o.find('iframe')[0].contentWindow.btnCancel();
                        return false;
                    },
                    end:function () {
                        if(b) layui.table.reload('noticeTable');
                    }
                });
            }
        }

        //表格工具条监听
        table.on('toolbar(noticeTable)',function (obj) {
            var event = obj.event;
            if("add" == event){
                active.dialog('新增公告',"");
            }
        })

        table.on('tool(noticeTable)',function (obj) {
            var event = obj.event;
            var status = obj.data.status;
            var data = [];
            if('edit'==event){
                active.dialog('编辑公告',obj.data.id);
            }else if('more' == event){
                if(status==1){
                    data = [{title:'查看',id:'look',nid:obj.data.id},{title:'撤回',id:'back',nid:obj.data.id},{title:'删除',id:'delete',nid:obj.data.id}]
                }else{
                    data = [{title:'查看',id:'look',nid:obj.data.id},{title:'发布',id:'issue',nid:obj.data.id},{title:'删除',id:'delete',nid:obj.data.id}]
                }

                //下拉菜单
                dropdown.render({
                    elem:this,
                    show:true,
                    data:data,
                    click:function (data) {
                        var id = data.id;
                        if('issue' == id){

                        }else if('back' == id){

                        }else{
                            top.layer.open({
                                type:2,
                                content:'/system/nc/look?id='+data.nid,
                                area: ['900px','633px'],
                                anim:1,
                                maxmin:true,
                                closeBtn:1,
                                resize:false
                            })
                        }
                    }
                });
            }
        })


    });
</script>
</body>
</html>